import {MyNavBar} from '@/components'
import {useDetailHook} from '@/hooks'
import {queryString, timer} from '@/utils'
import {_agree, _disagree, _getOrder} from './store'
import {Toast, ActivityIndicator, Button, WhiteSpace} from 'antd-mobile'
import {history} from 'umi'

import './index.less'

function Order() {
  const id = queryString('id')
  if (!id) {
    Toast.fail('参数不正确')
    history.goBack()
  }

  const renderStatus = (val) => {
    if (val == 1) {
      return <div className='status yellow'>待支付</div>
    } else if (val == 2) {
      return <div className='status green'>已支付</div>
    } else if (val == 3) {
      return <div className='status red'>已取消</div>
    }
  }

  const handleAgree = async () => {
    const result = await _agree(+id)
    if (result) {
      Toast.success('支付成功')
      history.push('/order')
    }
  }

  const handleDisagree = async () => {
    const result = await _disagree(+id)
    if (result) {
      Toast.success('操作成功')
      history.push('/order')
    }
  }

  const {detailData, loading} = useDetailHook({func: _getOrder.bind(null, id)})

  const house = detailData?.house
  const houseInfo = detailData?.house?.houseInfo
  const Owner = detailData?.house?.Owner

  return (<div>
    <MyNavBar title='订单详情'/>
    {loading ? <ActivityIndicator toast/> : <div className='order'>
      <div className='item' onClick={() => {
        history.push({pathname: '/house/house', query: {id: detailData?.houseId}})
      }}>
        <h1 className='title'>房屋信息</h1>
        <div className='info'>
          <img src={houseInfo?.pictures ? houseInfo?.pictures.split('|')[0] : require('@/assets/blank.png')}/>
          <div>
            <p className='houseName'>房屋标题：{house?.name}</p>
            <p className='owner'>租金：{house?.rent}</p>
            <p className='amount'>地区：{house?.area?.name}</p>
          </div>
        </div>
        <p className='createTime'><span>发布时间：</span>{timer(house?.createdAt)}</p>
        <p className='createTime'><span>地址：</span>{house?.address}</p>
        <p className='createTime'><span>描述：</span>{house?.description}</p>
      </div>
      <div className='item'>
        <h1 className='title'>订单信息</h1>
        <p className='createTime'><span>金额：</span>{detailData?.amount}</p>
        <p className='createTime'>
          <span>入住时间：</span>{timer(detailData?.startTime, 'no') + '~' + timer(detailData?.endTime, 'no')}</p>
        <p className='createTime'><span>联系号码：</span>{detailData?.phoneNum}</p>
        <p className='createTime'>
          <span>入住人：</span>{detailData?.persons?.length && detailData?.persons.map(item => (item.name + '-' + item.No)).join('|')}
        </p>
        <p className='createTime'><span>发起时间：</span>{timer(house?.createdAt)}</p>
        {renderStatus(detailData.status)}
      </div>
      <div className='item'>
        <h1 className='title'>房东信息</h1>
        <div className='info'>
          <img
            src={Owner?.userInfo?.avatar ? Owner?.userInfo.avatar : require('@/assets/blank.png')}
            onClick={(e) => {
              e.stopPropagation()
              history.push({pathname: '/user/userDetail', query: {id: house?.oid}})
            }}
          />
          <div>
            <p className='houseName'>真实姓名：{Owner?.userInfo?.firstName + Owner?.userInfo?.secondName}</p>
            <p className='owner'>昵称：{Owner?.nickName}</p>
            <p className='amount'>地区：{Owner?.userInfo?.area?.name}</p>
          </div>
        </div>
      </div>
      {detailData?.status == 1 && <div>
        <Button type='primary' onClick={handleAgree}>支 付</Button>
        <WhiteSpace size='lg'/>
        <Button type='danger' onClick={handleDisagree}>拒 绝</Button>
      </div>}
    </div>}

  </div>)
}

export default Order
